<script setup lang="ts">
  import { ref, onMounted, computed } from 'vue'
  import { list as fetchTimelineList } from '@/api/timeline'
  import { Timeline } from '@/types/api'

  // 页面状态
  const loading = ref(false)
  const timelineItems = ref<Timeline[]>([])

  // 获取历程数据
  const getTimelineData = async () => {
    loading.value = true
    try {
      const data = await fetchTimelineList()
      if (data && data.length > 0) {
        timelineItems.value = data
      } else {
        timelineItems.value = []
      }
    } catch (error) {
      console.error('获取历程数据失败:', error)
      timelineItems.value = []
    } finally {
      loading.value = false
    }
  }

  // 格式化日期
  const formatDate = (dateStr: string): string => {
    const date = new Date(dateStr)
    return date.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: 'long',
      day: 'numeric',
    })
  }

  // 获取年份
  const getYear = (dateStr: string): string => {
    const date = new Date(dateStr)
    return date.getFullYear().toString()
  }

  // 按年份分组历程项目
  const groupedTimeline = ref<{ year: string; items: Timeline[] }[]>([])

  const groupTimelineByYear = () => {
    const groups: { [year: string]: Timeline[] } = {}

    timelineItems.value.forEach(item => {
      const year = getYear(item.date)
      if (!groups[year]) {
        groups[year] = []
      }
      groups[year].push(item)
    })

    // 按年份降序排列
    groupedTimeline.value = Object.keys(groups)
      .sort((a, b) => parseInt(b) - parseInt(a))
      .map(year => ({
        year,
        items: groups[year].sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()),
      }))
  }

  // 新增：过滤掉内容为空的时间点
  const filteredGroupedTimeline = computed(() =>
    groupedTimeline.value.map(group => ({
      year: group.year,
      items: group.items.filter(item => item.content && item.content.trim() !== ''),
    }))
  )

  onMounted(async () => {
    await getTimelineData()
    groupTimelineByYear()
  })
</script>

<template>
  <div class="timeline-page">
    <div class="container">
      <!-- 页面头部 -->
      <div class="page-header">
        <div class="header-content">
          <h1 class="page-title">🚀 博客历程</h1>
          <p class="page-subtitle">记录每一个重要的时刻，见证成长的足迹</p>
        </div>
        <div class="header-stats">
          <div class="stat-item">
            <span class="stat-number">{{ timelineItems.length }}</span>
            <span class="stat-label">历程节点</span>
          </div>
          <div class="stat-item">
            <span class="stat-number">{{ groupedTimeline.length }}</span>
            <span class="stat-label">年度记录</span>
          </div>
        </div>
      </div>

      <!-- 加载状态 -->
      <div v-if="loading" class="loading-state">
        <div class="loading-spinner">
          <div class="spinner"></div>
          <p>正在加载历程数据...</p>
        </div>
      </div>

      <!-- 空状态 -->
      <div v-else-if="timelineItems.length === 0" class="empty-state">
        <div class="empty-icon">📝</div>
        <h3>暂无历程记录</h3>
        <p>历程正在书写中，敬请期待...</p>
      </div>

      <!-- 历程时间轴 -->
      <div v-else class="timeline-container">
        <div class="timeline-wrapper">
          <div v-for="group in filteredGroupedTimeline" :key="group.year" class="year-group">
            <!-- 年份标签 -->
            <div class="year-label">
              <span class="year-text">{{ group.year }}</span>
              <div class="year-line"></div>
            </div>

            <!-- 该年份的历程项目 -->
            <div class="timeline-items">
              <div
                v-for="(item, index) in group.items"
                :key="item.id"
                class="timeline-item"
                :class="{ alternate: index % 2 === 1 }"
              >
                <!-- 时间点 -->
                <div class="timeline-dot">
                  <div class="dot-inner"></div>
                </div>

                <!-- 内容卡片 -->
                <div class="timeline-card">
                  <div class="card-header">
                    <h3 class="item-title">{{ item.title }}</h3>
                    <span class="item-date">{{ formatDate(item.date) }}</span>
                  </div>
                  <div class="card-content">
                    <div class="item-content" v-html="item.content"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 时间轴线 -->
        <div class="timeline-line"></div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .timeline-page {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    padding: 2rem 0 4rem;
  }

  .container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1rem;
  }

  /* 页面头部 */
  .page-header {
    text-align: center;
    margin-bottom: 4rem;
    padding: 2rem;
    background: var(--bg-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
    border: 1px solid var(--border-color);
  }

  .header-content {
    flex: 1;
    text-align: left;
  }

  .page-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .page-subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
  }

  .header-stats {
    display: flex;
    gap: 2rem;
  }

  .stat-item {
    text-align: center;
    padding: 1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: var(--radius-lg);
    color: white;
    min-width: 80px;
  }

  .stat-number {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
  }

  .stat-label {
    font-size: 0.85rem;
    opacity: 0.9;
  }

  /* 加载状态 */
  .loading-state {
    text-align: center;
    padding: 4rem 2rem;
  }

  .loading-spinner {
    display: inline-block;
    background: var(--bg-color);
    border-radius: var(--radius-xl);
    padding: 2rem;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
  }

  .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top: 3px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  .loading-spinner p {
    color: var(--text-secondary);
    margin: 0;
  }

  /* 空状态 */
  .empty-state {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--bg-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
  }

  .empty-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
  }

  .empty-state h3 {
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
  }

  .empty-state p {
    color: var(--text-secondary);
    margin: 0;
  }

  /* 时间轴容器 */
  .timeline-container {
    position: relative;
    background: var(--bg-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: 2rem;
    overflow: hidden;
    border: 1px solid var(--border-color);
  }

  .timeline-wrapper {
    position: relative;
    z-index: 2;
  }

  /* 主时间轴线 */
  .timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, #667eea, #764ba2);
    transform: translateX(-50%);
    z-index: 1;
  }

  /* 年份分组 */
  .year-group {
    margin-bottom: 3rem;
  }

  .year-label {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    position: relative;
  }

  .year-text {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 0.75rem 2rem;
    border-radius: var(--radius-xl);
    font-size: 1.25rem;
    font-weight: 700;
    box-shadow: var(--shadow-md);
    position: relative;
    z-index: 3;
  }

  .year-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--border-color);
    z-index: 1;
  }

  /* 时间轴项目 */
  .timeline-items {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  .timeline-item {
    display: flex;
    align-items: center;
    position: relative;
    min-height: 120px;
  }

  .timeline-item:not(.alternate) {
    padding-right: 50%;

    .timeline-card {
      margin-right: 2rem;
      text-align: right;
    }

    .timeline-dot {
      position: absolute;
      right: 50%;
      top: 50%;
      transform: translate(50%, -50%);
    }
  }

  .timeline-item.alternate {
    padding-left: 50%;

    .timeline-card {
      margin-left: 2rem;
      text-align: left;
    }

    .timeline-dot {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }

  /* 时间点 */
  .timeline-dot {
    width: 20px;
    height: 20px;
    background: var(--bg-color);
    border: 4px solid #667eea;
    border-radius: 50%;
    z-index: 3;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
  }

  .dot-inner {
    width: 8px;
    height: 8px;
    background: #667eea;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* 内容卡片 */
  .timeline-card {
    background: var(--bg-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    max-width: 400px;
    width: 100%;
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
  }

  .timeline-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
  }

  .card-header {
    padding: 1.5rem 1.5rem 0;
  }

  .item-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
    line-height: 1.4;
  }

  .item-date {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
  }

  .card-content {
    padding: 1rem 1.5rem 1.5rem;
  }

  .item-content {
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 0.95rem;
  }

  .item-content :deep(p) {
    margin: 0 0 0.5rem 0;
  }

  .item-content :deep(p:last-child) {
    margin-bottom: 0;
  }

  /* 响应式设计 */
  @media (max-width: 768px) {
    .page-header {
      flex-direction: column;
      text-align: center;
    }

    .header-content {
      text-align: center;
    }

    .page-title {
      font-size: 2rem;
    }

    .header-stats {
      justify-content: center;
    }

    .timeline-line {
      left: 20px;
    }

    .timeline-item,
    .timeline-item.alternate {
      padding-left: 40px;
      padding-right: 0;
      justify-content: flex-start;

      .timeline-card {
        margin-left: 2rem;
        margin-right: 0;
        text-align: left;
      }

      .timeline-dot {
        left: 20px;
        transform: translate(-50%, -50%);
      }
    }

    .year-label {
      justify-content: flex-start;
      margin-left: 2rem;
    }

    .year-text {
      font-size: 1.1rem;
      padding: 0.5rem 1.5rem;
    }
  }

  @media (max-width: 480px) {
    .timeline-container {
      padding: 1rem;
    }

    .timeline-line {
      left: 15px;
    }

    .timeline-item,
    .timeline-item.alternate {
      padding-left: 35px;

      .timeline-dot {
        left: 15px;
      }

      .timeline-card {
        margin-left: 1.5rem;
      }
    }

    .year-label {
      margin-left: 1.5rem;
    }
  }
</style>
